
<div class="container" ng-init="getDestinos()" >
    <div id="genericError" class="alert alert-danger fade in" ng-show="showAlertError">
        <h4 class="alert-heading">Error!</h4>
        <p></p>
    </div>
    <br></br>
    <br></br>
    <form name="toProcess">
        <center>
            <p class="lead">Buscar Hoteles</p>
            <div class="control-group">
                <div class="newHire-input">
                    <select  placeholder="Destino" type="text" style="width: 300px; height: 30px; text-align: center;" ng-model="hotel.destino" class="input-large" name ="destino" id="destino" ng-options="destino.id as destino.ciudad group by destino.pais for destino in destinos" >
                        <option value="" disabled selected>Destino</option>
                    </select>
                    <input ng-model="hotel.startDate" type="text" id="startDate" placeholder="Fecha Llegada" style="width: 300px; height: 30px; text-align: center;">
                    <input ng-model="hotel.endDate" type="text" id="endDate" placeholder="Fecha Partida" style="width: 300px; height: 30px; text-align: center;">

                </div>
                <br/>
                <button id="requestUsers" class="btn btn-primary" type="button" ng-click="showHotels()" ng-show="displayButton">Buscar</button>
            </div>
            <div id="loading" ng-show="loading">
                <center>
                    <p>
                        <img src="images/ajax-loader.gif" /> Por favor espere...
                    </p>
                </center>
            </div>
        </center>
    </form>
    <br/>
    <br/>
    <fieldset ng-show="filters">
        <!-- Form Name -->
        <legend class="legendWhite">Filtros</legend>

        <div class="form-group">
            <label class="col-sm-2 control-label legendWhite" for="codigo">Nombre</label>
            <div class="col-sm-4">
                <input type="text" ng-model="search.nombre" id="codigo" name="codigo" class="form-control">
            </div>
            <label class="col-sm-2 control-label legendWhite" for="categoria">Categoria</label>
            <div class="col-sm-4">
                <select  ng-model="search.categoria" type="text" style="width: 360px; height: 34px; text-align: center;" class="input-large" id="calificacion">
                    <option value=""></option>
                    <option value="1">1 Estrella</option>
                    <option value="2">2 Estrellas</option>
                    <option value="3">3 Estrellas</option>
                    <option value="4">4 Estrellas</option>
                    <option value="5">5 Estrellas</option>
                </select>
            </div>
        </div>
    </fieldset>
    <div class="container-fluid" style="background-color: transparent" ng-show="showTableHotels">
        <div class="container container-pad" id="property-listings">
            <div class="row">
                <div class="col-sm-6" >
                    <div class="brdr bgc-fff pad-10 box-shad btm-mrg-20 property-listing" ng-repeat="hotel in hotels1 | filter:search"  >
                        <div class="media">
                            <a class="pull-left" href="#" target="_parent">
                                <img alt="image" class="img-responsive" src="{{hotel.imagen}}" width="180" height="135" ></a>

                            <div class="clearfix visible-sm"></div>

                            <div class="media-body fnt-smaller">
                                <a href="#" target="_parent"></a>

                                <h4 class="media-heading">
                                    <a href="#/hotel/{{hotel.id}}" target="_parent">{{hotel.nombre}} <small class="pull-right">{{hotel.domicilio}}</small></a></h4>


                                <ul class="list-inline mrg-0 btm-mrg-10 clr-535353">
                                    <li>
                                        <i class="fa fa-star"></i>
                                        <i ng-class="{ 'fa fa-star': hotel.categoria >= 2,'fa fa-star-o': hotel.categoria < 2}"></i>
                                        <i ng-class="{ 'fa fa-star': (hotel.categoria >= 3),'fa fa-star-o': hotel.categoria < 3}"></i>
                                        <i ng-class="{ 'fa fa-star': (hotel.categoria >= 4),'fa fa-star-o': hotel.categoria < 4}"></i>
                                        <i ng-class="{ 'fa fa-star': (hotel.categoria >= 5),'fa fa-star-o': hotel.categoria < 5}"></i>
                                    </li>

                                    <li style="list-style: none">|</li>

                                    <li>{{hotel.web}}</li>

                                    <li style="list-style: none">|</li>

                                    <li>{{hotel.tel}}</li>
                                </ul>

                                <p class="hidden-xs">{{hotel.descripcion}}</p>
                            </div>
                        </div>
                    </div><!-- End Listing-->
                </div>
                <div class="col-sm-6" >
                    <div class="brdr bgc-fff pad-10 box-shad btm-mrg-20 property-listing" ng-repeat="hotel in hotels2 | filter:search" >
                        <div class="media">
                            <a class="pull-left" href="#" target="_parent">
                                <img alt="image" class="img-responsive" src="{{hotel.imagen}}" width="180" height="135"></a>

                            <div class="clearfix visible-sm"></div>

                            <div class="media-body fnt-smaller">
                                <a href="#" target="_parent"></a>

                                <h4 class="media-heading">
                                    <a href="#/hotel/{{hotel.id}}" target="_parent">{{hotel.nombre}} <small class="pull-right">{{hotel.domicilio}}</small></a></h4>


                                <ul class="list-inline mrg-0 btm-mrg-10 clr-535353">
                                    <li>
                                        <i class="fa fa-star"></i>
                                        <i ng-class="{ 'fa fa-star': hotel.categoria >= 2,'fa fa-star-o': hotel.categoria < 2}"></i>
                                        <i ng-class="{ 'fa fa-star': (hotel.categoria >= 3),'fa fa-star-o': hotel.categoria < 3}"></i>
                                        <i ng-class="{ 'fa fa-star': (hotel.categoria >= 4),'fa fa-star-o': hotel.categoria < 4}"></i>
                                        <i ng-class="{ 'fa fa-star': (hotel.categoria >= 5),'fa fa-star-o': hotel.categoria < 5}"></i>
                                    </li>

                                    <li style="list-style: none">|</li>

                                    <li>{{hotel.web}}</li>

                                    <li style="list-style: none">|</li>

                                    <li>{{hotel.tel}}</li>
                                </ul>

                                <p class="hidden-xs">{{hotel.descripcion}}</p>
                            </div>
                        </div>
                    </div><!-- End Listing-->
                </div>
            </div>
        </div>
    </div>
</div>